<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('system_log.系统日志')" />
    <SearchCom
      :searchList="searchList"
      @search="handleSearch"
      @reset="handleReset"
    />
    <el-radio-group v-model="logType" @change="refresh">
      <el-radio-button :label="1">{{$t('system_log.平台操作日志')}}</el-radio-button>
      <el-radio-button :label="2">{{$t('system_log.商户操作日志')}}</el-radio-button>
      <el-radio-button :label="3">{{$t('system_log.平台登陆日志')}}</el-radio-button>
      <el-radio-button :label="4">{{$t('system_log.商户登陆日志')}}</el-radio-button>
    </el-radio-group>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 230px)"
      row-key="id"
      border
      v-loading="loading"
    >
      <el-table-column
        :label="t('system_log.序号')"
        type="index"
        width="80"
      />
      <el-table-column
        :label="t('system_log.业务描述')"
        :prop="'description' + locale"
      />
      <el-table-column
        v-if="logType === 2 || logType === 4"
        :label="t('system_log.商户名')"
        :prop="'tenantName' + locale"
      />
      <el-table-column label="ip" prop="requestIp" />
      <el-table-column
        :label="t('system_log.创建时间')"
        prop="createdTime"
        :formatter="(v) => moment(v.createdTime).format('YYYY-MM-DD HH:mm:ss')"
      />
      <el-table-column
        :label="t('system_log.处理时间')"
        prop="time"
        :formatter="(v) => v.time + 'ms'"
      />
      <el-table-column :label="t('system_log.用户名')" prop="username" />
      <el-table-column
        :label="t('system_log.用户昵称')"
        prop="nickName"
      />
      <el-table-column :label="t('system_log.浏览器')" prop="browser" />
      <!-- <el-table-column :label="t('system_log.方法')" prop="method" />
      <el-table-column :label="t('system_log.参数')" prop="params" /> -->
      <el-table-column :label="t('system_log.操作')" width="300">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button type="text" @click="handleDetail(scope.row)">{{
              t("system_log.详情")
            }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex_aic_jcc mt10 w-full">
      <el-pagination
        v-model="currentPage"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <Detail v-model:show="showDetail" :data="detailData" :logType="logType" />
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import Detail from "./components/detail.vue";
import moment from "moment";

const { t, locale } = useI18n();
const showDetail = ref(false);
const detailData = ref({});
const logType = ref(1);
const searchList = computed(() => {
  const list = [
    {
      label: t("system_log.日志类型"),
      key: "logType",
      type: "select",
      options: [
        {
          label: t("system_log.正常"),
          value: "INFO",
        },
        {
          label: t("system_log.异常"),
          value: "ERROR",
        },
      ],
    },
    {
      label: t("system_log.业务描述"),
      key: "description",
      type: "input",
    },
    {
      label: t("system_log.用户名"),
      key: "username",
      type: "input",
    },
    {
      label: t("system_log.用户昵称"),
      key: "nickName",
      type: "input",
    },
  ];
  if (logType.value === 2 || logType.value === 4) {
    list.push({
      label: t("system_log.商户名"),
      key: "tenantName",
      type: "input",
    });
  }
  list.push({
    label: t("system_log.处理时间"),
    key: "date",
    type: "daterange",
    dateType: "datetimerange",
  });
  return list;
});

const fetchMessages = (params) => {
  const _params = {
    logType: params.logType,
    ["description" + locale.value]: params.description,
    username: params.username,
    nickName: params.nickName,
    createdTimeStart: params.date?.[0],
    createdTimeEnd: params.date?.[1],
    page: currentPage.value - 1,
    pageSize: pageSize.value,
  };
  if (logType.value === 2 || logType.value === 4) {
    _params["tenantName" + locale.value] = params.tenantName;
  }
  if (logType.value === 1) {
    return Api.sysLog_admin(_params);
  } else if (logType.value === 2) {
    return Api.sysLog_tenant(_params);
  } else if (logType.value === 3) {
    return Api.sysLog_adminLogin(_params);
  } else if (logType.value === 4) {
    return Api.sysLog_tenantLogin(_params);
  }
};

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(fetchMessages);

const handleDetail = (row) => {
  detailData.value = row;
  showDetail.value = true;
};

const refresh = () => {
  currentPage.value = 1;
  getDataList();
};
</script>
<style lang="scss" scoped></style>
